// 第一种，性能最好 但 工作不常用
import React from "react"

export default class Foo extends React.Component {
    constructor() {
        super()
        this.state = {
            count: 0,
            msg: 'hello component'
        }
    }
    handle = function(){
        this.setState({
            count:this.state.count + 5
        })
    }
    render() {
        return (
            <div>
                <h1>{this.state.count}</h1>
                {/* 
                    1.当我们点击按钮时，是外层的这个箭头函数，再react内部被react调用
                    2.当我们手动调用了handle，是利用组件实例调用的，而handle前的this就是实例对象，属于对象调用方法，
                    所以handle中的this就指向实例对象
                */}
                <button onClick={()=>{this.handle()}}>+</button>
            </div>
        )
    }
}